<template>
  <div v-loading="dataLoading">
    <c-section title="申请人信息">
      <c-list :column="4">
        <c-list-item label="申请人" :value="detailData.applyName" />
        <c-list-item label="申请人电话" :value="detailData.applyPhone" />
        <c-list-item label="申请时间" :value="detailData.applyTime" />
        <c-list-item label="申请人部门" :span="3" :value="detailData.applyDept" />
      </c-list>
    </c-section>
    <c-section title="门店信息">
      <c-list :column="4">
        <c-list-item label="所属办事处" :value="detailData.officeName" />
        <c-list-item label="客户编码" :value="detailData.clientCode" />
        <c-list-item label="客户名称" :value="detailData.clientName" />
        <c-list-item label="门店编码" :value="detailData.shopCode" />
        <c-list-item label="门店名称" :span="4" :value="detailData.shopName" />
        <c-list-item label="门店详细地址" :span="4" :value="detailData.shopAddress" />
      </c-list>
    </c-section>
    <c-section title="项目信息">
      <c-list :column="4">
        <c-list-item label="项目号" :value="detailData.constCode" />
        <c-list-item label="流程名称" :span="3" :value="detailData.acceptName" />
      </c-list>
    </c-section>
    <c-section title="验收信息">
      <c-list :column="4">
        <c-list-item label="验收任务" :value="detailData.acceptTask" />
        <c-list-item label="验收进度" :value="detailData.schedule" />
        <c-list-item label="提报时间" :value="detailData.submissionTime" />
        <c-list-item label="监理" :value="detailData.supervisionName" />
        <c-list-item label="督导" :value="detailData.councilorName" />
        <c-list-item label="验收专员" :value="detailData.commissionerName" />
        <c-list-item label="客户经理" :value="detailData.clientManagerName" />
        <c-list-item label="装修面积" :value="detailData.decorationArea" />
        <c-list-item label="实际验收面积" :value="detailData.actualAcceptArea" />
        <c-list-item label="实际门头验收面积" :value="detailData.actualDoorAcceptArea" />
        <c-list-item label="预计验收时间" :value="detailData.expectAcceptTime" />
        <c-list-item label="实际验收时间" :value="detailData.actualAcceptTime" />
        <c-list-item label="硬装首次验收结果" :value="detailData.hardAccrptResult" />
        <c-list-item label="硬装整改结果" :value="detailData.hardRectifyResult" />
        <c-list-item label="硬装归档时间" :value="detailData.hardArchiveTime" />
        <c-list-item label="硬装应整改完成时间" :value="detailData.hardRectifyCompleteTime" />
        <c-list-item label="硬装结案类型" dict-type-code="DECORATION_CLOSED_TYPE" :value="detailData.hardFinishType" />
        <c-list-item label="软装首次验收结果" :value="detailData.softAccrptResult" />
        <c-list-item label="软装整改结果" :value="detailData.softRectifyResult" />
        <c-list-item label="软装归档时间" :value="detailData.softArchiveTime" />
        <c-list-item label="软装应整改完成时间" :value="detailData.softRectifyCompleteTime" />
        <c-list-item label="软装结案类型" dict-type-code="DECORATION_CLOSED_TYPE" :value="detailData.softFinishType" />

      </c-list>
    </c-section>
    <c-section v-show="tableData1&&tableData1.length>0">
      <c-list :column="1">
        <el-table
          ref="refTable"
          element-loading-text="加载中"
          :data="tableData1"
          highlight-current-row
          max-height="400"
          :header-cell-style="{background:'#F6F6F6', borderRight:'1px solid #EBEEF5'}"
          style="width: 90%;margin-bottom:20px"
        >
          <el-table-column type="index" width="55" />
          <el-table-column prop="belongDuty" label="责任归属" min-width="100" />
          <el-table-column prop="acceptResult" label="验收结果" min-width="100">
            <template slot-scope="scope">
              {{ formaterData(acceptResultOptions,scope.row.acceptResult) }}
            </template>
          </el-table-column>
          <el-table-column prop="mustRectifyEndTime" label="应整改完成时间" min-width="100" />
          <el-table-column prop="actualRectifyEndTime" label="实际整改完成时间" min-width="100" />
        </el-table>
      </c-list>
    </c-section>
    <c-section title="各环节">
      <c-list :column="1">
        <el-table
          ref="refTable"
          element-loading-text="加载中"
          :data="tableData"
          highlight-current-row
          max-height="400"
          :header-cell-style="{background:'#F6F6F6', borderRight:'1px solid #EBEEF5'}"
          style="width: 90%;margin-bottom:20px"
        >
          <el-table-column type="index" width="55" />
          <el-table-column prop="step" label="操作步骤" min-width="100" />
          <el-table-column prop="operatName" label="人员名称" min-width="100" />
          <el-table-column prop="receiveTime" label="接收时间" min-width="100" />
          <el-table-column prop="isTimeout" label="是否超时" min-width="100">
            <template slot-scope="scope">
              <span>{{ scope.row.isTimeout===1?'是':(scope.row.isTimeout===0?'否':scope.row.isTimeout) }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="timeoutDay" label="超时时长(天)" min-width="100" />
        </el-table>
      </c-list>
    </c-section>
  </div>
</template>
<script>
import { getAcceptTaskDetail, getAcceptTaskStep, getAcceptRectifyTask } from '@/api/common'
import CSection from '@/components/CSection/CSection.vue'
import { formaterData } from '@/utils'
import { getDictByPatchType } from '@/api/dataDict'

export default {
  name: 'AcceptTaskDetail',
  components: { CSection },

  props: {
    pageFlag: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      id: '',
      formaterData,
      tableData: [],
      acceptResultOptions: [],
      tableData1: [],
      activeName: 'first',
      dataLoading: false,
      detailData: {
      }
    }
  },
  async created() {
    this.id = this.$route.query.id
    if (this.id) {
      this.dataLoading = true
      const { ACCEPT_RESULT } = await getDictByPatchType(['ACCEPT_RESULT'])
      this.acceptResultOptions = ACCEPT_RESULT
      getAcceptTaskDetail(this.id).then(res => {
        if (res.success === 1) {
          this.detailData = res.data
          getAcceptRectifyTask(res.data.constCode).then(res => {
            this.tableData1 = res.data
          })
        }
        this.dataLoading = false
      }).catch(() => {
        this.dataLoading = false
      })
      getAcceptTaskStep(this.id).then(res => {
        if (res.success === 1) this.tableData = res.data.records
      })
    }
  },
  methods: {
    backConfigDetail() {
      this.$emit('goBack', false)
    }
  }
}
</script>
<style lang="scss" scoped>
/deep/ .el-breadcrumb__inner{
    color: $qup-color-primary;
  }
</style>
